<template>
  <div class="app-container">
    <el-form style="overflow:hidden">
      <el-col :span="12">
        <el-form-item
          label-width="105px"
          class="postInfo-container-item"
          style="padding-right:40px"
          label="检查标题"
        >
          <el-input v-model="postForm.name1" readonly="readonly"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="105px" class="postInfo-container-item" label="检查目标">
          <el-input v-model="postForm.name2" readonly="readonly"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="105px" class="postInfo-container-item" label="开始时间">
          <el-input v-model="postForm.name3" type="date" readonly="readonly"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="105px" class="postInfo-container-item" label="完成时间">
          <el-input v-model="postForm.name4" readonly="readonly"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <el-divider content-position="left" style="width:80%">检查表</el-divider>
    <el-table :data="postForm.listTable" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.num }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="检查表名">
        <template slot-scope="scope">
          <span>{{ scope.row.table }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/tasks/preview/'+scope.row.id">
            <el-button type="text" size="small">检查</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增组织节点信息对话框 -->
    <el-divider content-position="left" style="width:80%"></el-divider>
    <div slot="footer" class="dialog-footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="addChecktarget">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { fetchTask } from '@/api/task'
export default {
  name: 'Start',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: {
        name1: '检查计划名称',
        name2: '检查目标',
        name3: '所属单位',
        name4: '检查计划名称',
        listTable: [
          {
            id: 2,
            num: 1,
            table: '安全表1'
          },
          {
            id: 2,
            num: 2,
            table: '安全表2'
          },
          {
            id: 2,
            num: 3,
            table: '安全表3'
          },
          {
            id: 2,
            num: 4,
            table: '安全表4'
          },
          {
            id: 2,
            num: 5,
            table: '安全表5'
          },
          {
            id: 2,
            num: 6,
            table: '安全表6'
          }
        ]
      }
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.content_short.length
    },
    displayTime: {
      //完成时间
      get() {
        return +new Date(this.postForm.display_time)
      },
      set(val) {
        this.postForm.display_time = new Date(val)
      }
    }
  },
  created() {
    // if (this.isEdit) {
    //   this.task.taskId = this.$route.params && this.$route.params.id
    let taskId = this.$route.params && this.$route.params.id
    // console.log('id' + taskId)
    this.fetchData(taskId)
    // }
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    fetchData(taskId) {
      fetchTask(taskId).then((response) => {
        this.postForm.name1
        console.log(response)
      })
    },
    setTagsViewTitle() {
      const title = 'Edit Article'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = 'Edit Article'
      document.title = `${title} - ${this.postForm.id}`
    },
    submitForm() {
      //   console.log(this.postForm)
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$notify({
            title: '成功',
            message: '发布文章成功',
            type: 'success',
            duration: 2000
          })
          this.postForm.status = 'published'
          this.loading = false
        } else {
          //   console.log('error submit!!')
          return false
        }
      })
    },
    draftForm() {
      if (
        this.postForm.content.length === 0 ||
        this.postForm.title.length === 0
      ) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.app-container /deep/ .el-divider--horizontal:first-child {
  width: 75%;
  display: inline-block;
}
.app-container /deep/ .el-input {
  width: 50%;
}
.app-container /deep/ .el-divider--horizontal:last-child {
  width: 24%;
  display: inline-block;
}
.app-container /deep/ .el-select {
  width: 82%;
}
.app-container /deep/ .el-dialog__footer {
  text-align: center;
}
.app-container /deep/ .dialog-footer {
  text-align: center;
}
</style>

